<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         * {
      margin: 0;
      padding: 0;
    }

    .outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    .center {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    .inner {
      width: 100px;
      height: 100px;
      background-color: orange;
      position: absolute;
      top: 0;
      left: 600px;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    p {
      width: 100px;
      height: 100px;
      background-color: purple;
      position: absolute;
      left: 600px;
      top: 500px;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="center">
            <div class="inner"></div>
        </div>
  </div>

  <p></p>
  
  <script>
    // 事件传播  

    // 当行为发生的时候  当前的行为会按照结构父级的顺序向上传递 
    // 直到window为止  
    // 也叫事件冒泡  

    // 传播的三个阶段 :

    // 捕获   从window到事件目标的过程
    // 目标   准确触发事件的元素 
    // 冒泡   从目标到window的过程



    // 冒泡 
    // document.getElementsByClassName('inner')[0].addEventListener('click',function(){console.log('inner');})
    // document.getElementsByClassName('center')[0].addEventListener('click',function(){console.log('center');})
    // document.getElementsByClassName('outer')[0].addEventListener('click',function(){console.log('outer');})
    // document.body.addEventListener('click',function(){console.log('body');})
    // document.documentElement.addEventListener('click',function(){console.log('html');})
    // window.addEventListener('click',function(){console.log('window');})


    // 捕获
    // 必须是w3c浏览器 并且 dom2级别绑定才有捕获
    // addEventListener 第三个参数 决定
    // 默认是false  表示冒泡  
    // true  表示捕获阶段触发 


    // document.getElementsByClassName('inner')[0].addEventListener('click',function(){console.log('inner');},true)
    // document.getElementsByClassName('center')[0].addEventListener('click',function(){console.log('center');},true)
    // document.getElementsByClassName('outer')[0].addEventListener('click',function(){console.log('outer');},true)
    // document.body.addEventListener('click',function(){console.log('body');},true)
    // document.documentElement.addEventListener('click',function(){console.log('html');},true)
    // window.addEventListener('click',function(){console.log('window');},true)



    // 获取事件目标 
    

  </script>
</body>
</html>